<div class="packagingDowntime" id="packagingDowntime" style="height:100%">
	<div class="ui-layout-center scrollable" id="reportHolder">
		<div class="A4 p_1 portrait">
		    <div class="column w100">
		        <h1>packaging - downtime</h1>    
		    </div>
		    <div class="column w25">
		        <table class="header-data w100">
		            <tbody><tr>
		                <td class="w25 left">For</td>
		                <td class="w75" id="reportForDate"></td>
		            </tr>
		            <tr>
		                <td class="w25 left">Entries</td>
		                <td class="w75">---</td>
		            </tr>
		            <tr>
		                <td class="w25 left">User</td>
		                <td class="w75" id="reportUser"></td>
		            </tr>
		            <tr>
		                <td class="w25 left">Data</td>
		                <td class="w75" id="reportTime"></td>
		            </tr>
		            <tr>
		                <td class="w25 left">Pages</td>
		                <td class="w75" id="reportPage"></td>
		            </tr>
		        </tbody></table>
		    </div>
		    <div class="column w75">
		        <div class="column w100 np" style="height: 95px;">
		            <hr>
		            <div class="column np w25">
		                <span>Notes</span>
		            </div>
		            <div class="column np w75 text-right">
		                <span>Dr. Oetker Canada Ltd.</span>
		            </div>
		        </div>
		    </div>
		    <div class="column w100 np">
		        <div class="column w25">
		            <hr>
		        </div>
		        <div class="column w75">
		            <div class="note"><strong>Notes:</strong> downtime codes percentages are with respect to total down time </div>
		            <hr>    
		    	</div>
			</div>
		</div>
	</div>
    <div id="timeFilter_holder" class="clearfix ui-layout-south">
    </div>
</div>
<script>
    var packagingDowntimeFX = function() {
        var _self = this;
        _self.perform = function() {
            $(".packagingDowntime").layout({
                resizable: false,
                closable: false,
                south__size: "120"
            });

            $('.datepicker.hook_day').datepicker({
                defaultDate: new Date(),
                dateFormat: 'd.m.yy'
            }).datepicker('setDate', new Date());

            $("#timeFilter_holder").load("_parts/TimeFilter.html?x="+Math.random(), function() {
                $('.datepicker.hook_dateFrom').datepicker({
                    defaultDate: '-3m',
                    dateFormat: 'd.m.yy'
                }).datepicker('setDate', '-3m');
                $('.datepicker.hook_dateTo').datepicker({
                    defaultDate: new Date(),
                    dateFormat: 'd.m.yy'
                }).datepicker('setDate', new Date());


                _self.loadYearsForTimeFilter();
                _self.loadLinesForTimeFilter();

                $(".timeFilter #row3 .col5").remove();
            });
        };
        _self.loadYearsForTimeFilter = function(callback) {
            $.getJSON(window.CONSTANTS.SERVICE_URL, {
                request: 280,
                action: 'getYears'
            },
            function(response) {
                $.each(response, function(index, value) {
                    $(".timeFilter .hook_yYear").append("<option>" + value.availableYear + "</option>");
                    $(".timeFilter .hook_mYear").append("<option>" + value.availableYear + "</option>");
                });
                if (callback) {
                    callback();
                }
            });
        };
        _self.loadLinesForTimeFilter = function(callback) {
            $.getJSON(window.CONSTANTS.SERVICE_URL, {
                request: 280,
                action: 'getLines'
            },
            function(response) {
                $(".timeFilter .hook_line").html("").append("<option selected value='0'>All</option>");
                $.each(response, function(index, value) {
                    $(".timeFilter .hook_line").append("<option value=" + value.availableLine + ">" + value.availableLine + "</option>");
                });
                if (callback) {
                    callback();
                }
            });
        };
        _self.refresh = function() {
            $("body").css('cursor', 'wait');

	        var params = {};
	        var type = $(".timeFilter .radio:checked").data('type');

	        if (parseInt($('.timeFilter .hook_line').val()) > 0) {
	            params.line = $('.timeFilter .hook_line').val();
	        }
            if (parseInt($('.timeFilter .hook_shift').val()) > 0) {
                params.shift = $('.timeFilter .hook_shift').val();
            }

	        switch (type) {
	            case 'period':
	                params.pStart = $('.timeFilter .hook_dateFrom').val();
	                if ($('.timeFilter .hook_oneDay').is(":checked")) {
	                    params.pOneDay = 'oneDay';
	                } else {
	                    params.pEnd = $('.timeFilter .hook_dateTo').val();
	                }
	                params.timeFrame = 'period';
	                break;
	            case 'month':
	                params.mMonth = $('.timeFilter .hook_mMonth').val();
	                params.mYear = $('.timeFilter .hook_mYear').val();
	                params.timeFrame = 'month';
	                break;
	            case 'year':
	                params.yYear = $('.timeFilter .hook_yYear').val();
	                params.timeFrame = 'year';
	                break;
	        };

            params.user="John Doe";
			params.request= 280;
			params.dataType= "json";
			reportBuilder.buildPackagingDowntimeReport(params,function() {
                $("body").css('cursor', 'default');
            });
        };

        _self.printReport = function() {
        	reportBuilder.printReport();
        };

        _self.assignEventHandlers = function() {
            $(document).on("click", ".timeFilter button.refresh", function() {
                _self.refresh();
            });

            $(document).on("click", ".timeFilter button.export", function() {
                _self.printReport();
            });
        };
        _self.clearEventHandlers = function(){
            $(document).off("click", ".timeFilter button.refresh");

            $(document).off("click", ".timeFilter button.export");
        };
    };
    if(!window.pDowntimeFX){
        window.pDowntimeFX = new packagingDowntimeFX();
        window.pDowntimeFX.perform();
        window.pDowntimeFX.clearEventHandlers();
        window.pDowntimeFX.assignEventHandlers();
    }
    else{
        window.pDowntimeFX.perform();
        window.pDowntimeFX.clearEventHandlers();
        window.pDowntimeFX.assignEventHandlers();
    }
</script>